<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <div class="flex flex-col !h-full justify-between">
      <el-scrollbar viewClass="flex-grow ">
        <el-row>
          <el-col :span="24">
            <div class="custom-text-18 mb-10px"> 退款员工 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-popover
            placement="top-start"
            title="退款员工"
            :width="200"
            trigger="hover"
            :content="cartEmployeeText"
          >
            <template #reference>
              <div class="custom-text-16">
                <el-text line-clamp="1"> {{ cartEmployeeText }} </el-text>
              </div>
            </template>
          </el-popover>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-radio-group v-model="formData.refundId">
              <el-radio :value="1" :label="1"><span class="font18">退至余额</span> </el-radio>
              <el-radio :value="2" :label="2"><span class="font18">原路退回</span></el-radio>
              <el-radio :value="3" :label="3">
                <span class="font18">退至银行卡/现金</span>
              </el-radio>
            </el-radio-group>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="formData.refundId == 1">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 退款金额 </div>
              <div> ￥{{ fenToYuan(totalPerformanceFee) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="formData.refundId == 2">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 原路退回明细 </div>
              <div> ￥{{ fenToYuan(totalPerformanceFee) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="formData.refundId == 3">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 退回明细 </div>
              <div> ￥{{ fenToYuan(totalPerformanceFee) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-form :model="formData.reservProject" ref="formRef" class="w-100%" :rules="rules">
            <el-form-item required prop="bank" class="mt-10px" label="银行名称">
              <el-input v-model="formData.reservProject.bank" class="" />
            </el-form-item>
            <el-form-item required prop="bankBranch" label="开户行信息">
              <el-input v-model="formData.reservProject.bankBranch" class="" />
            </el-form-item>
            <el-form-item required prop="bankCard" label="银行卡号">
              <el-input v-model="formData.reservProject.bankCard" class="" />
            </el-form-item>
            <el-form-item required prop="bankHolder" label="持卡人姓名">
              <el-input v-model="formData.reservProject.bankHolder" class="" />
            </el-form-item>
            <el-form-item required prop="bankPhone" label="预留手机号">
              <el-input v-model="formData.reservProject.bankPhone" class="" />
            </el-form-item>
          </el-form>
        </el-row>
        <el-row v-for="(item, index) in orderInfo.pay" :key="index">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> {{ item.classifyName }} </div>
              <div> <span>￥</span>{{ fenToYuan(item.paybalance) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
      </el-scrollbar>
      <div class="flex justify-end">
        <slot name="button"></slot>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts" name="orderInfo">
/** 服务购物车信息 */
import { useShopServiceWithOut } from '@/store/modules/shop/service'
const shopService = useShopServiceWithOut()
import { useAppStore } from '@/store/modules/app'
import { fenToYuan } from '@/utils'
import { propTypes } from '@/utils/propTypes'
const rules = reactive<any>({
  bank: [{ required: true, message: '请输入银行名称', trigger: 'blur' }],
  bankBranch: [{ required: true, message: '请输入银行卡开户行', trigger: 'blur' }],
  bankHolder: [{ required: true, message: '请输入持卡人姓名', trigger: 'blur' }],
  bankPhone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  bankCard: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }]
})
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
defineProps({
  cartEmployeeText: propTypes.string.def(''),
  orderInfo: propTypes.object
})
const formData = ref({
  refundId: 1,
  reservProject: {
    bank: '', //退款银行
    bankBranch: '', //银行卡开户行
    bankHolder: '', //银行卡持有人
    bankPhone: '', //银行卡预留手机号
    bankCard: '' //银行卡号
  } //银行卡信息
})

const totalPerformanceFee = computed(() => {
  return shopService.getTotalPerformanceFee
})
</script>
